<template>
  <div :id="eId" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'barEchart',
  props: {
    dataSource: {
      type: Array,
      default() {
        return [
          { value: 1548, name: 'CityE' },
          { value: 735, name: 'CityC' },
          { value: 510, name: 'CityD' },
          { value: 434, name: 'CityB' },
          { value: 335, name: 'CityA' }
        ]
      } 
    },
    eId: {
      type: String,
      default() {
        return 'main'
      }
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  computed: {},
  mounted() {
    this.init()
    // window.onresize = () => {
    //   myChart.resize()
    // }
  },
  methods: {
    init() {
      this.myChart = echarts.init(document.getElementById(this.eId))
      var option = {
        grid: {
          top: '10%',
          left: '1%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#3a4262'
            }
          },
          axisLabel: {
            color: '#ccc',
            fontSize: 14,
            fontFamily: 'Arial Normal'
          },
          axisTick: {
            show: false
          },
          data: this.dataSource.map(item => item.name)
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#3a4262'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#3a4262'
            }
          },
          axisLabel: {
            color: '#ccc',
            fontSize: 14,
            fontFamily: 'Arial Normal'
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            itemStyle: {
              color: '#6699ff'
            },
            data: this.dataSource.map(item => item.value),
            type: 'bar'
          }
        ]
      }

      option && this.myChart.setOption(option)
      let that = this
      setTimeout(() => {
        that.myChart.resize()
      }, 200)
      window.addEventListener('resize', () => {
        setTimeout(() => {
          that.myChart.resize()
        }, 200)
      })
    }
  },
  watch:{
    dataSource(){
      this.init();
    },
  }
}
</script>